<template>
  <div class="dashboard-container">
    <div class="dashboard-text">资源管理中心</div>
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        type="index"
        width="50">
      </el-table-column>
      <el-table-column
        prop="downloadUrl"
        label="预览/链接地址">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.downloadUrl"
            fit="fill">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column
        prop="fileName"
        label="文件名">
      </el-table-column>
      <el-table-column
        prop="type"
        label="文件类型">
      </el-table-column>
      <el-table-column
        prop="size"
        label="文件大小">
      </el-table-column>
      <el-table-column
        prop="referenceCount"
        label="引用次数">
      </el-table-column>
      <el-table-column
        prop="usedCount"
        label="下载次数">
      </el-table-column>
      <el-table-column
        prop="createdTime"
        label="创建时间">
      </el-table-column>
      <el-table-column
        prop="lastUsedTime"
        label="最近使用时间">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">下载</el-button>
          <el-button type="text" size="small" @click="deleteClick(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryData.pageIndex"
      :page-size="queryData.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        queryData: {
          appId: '',
          pageIndex: 1,
          pageSize: 10,
        },
        total: 0,
        tableData: []
      }
    },
    methods: {
      //加载表格数据
      loadData() {
        this.get('/portal/resource/page', this.queryData, (resp) => {
          this.tableData = resp.data.list
          this.total = resp.data.total
        })
      },
      //下载点击
      handleClick(row) {
        window.location.href = row.downloadUrl
      },
      //删除点击
      deleteClick(row) {
        const h = this.$createElement;
        this.$msgbox({
          title: '提示',
          message: h('p', null, [
            h('span', null, '确定删除 '),
            h('i', {style: 'color: #F56C6C'}, row.fileName),
            h('span', null, ' 吗?')
          ]),
          type: 'warning',
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = '执行中...';
              //删除操作
              this.post('/portal/resource/deleteByUuid', {appId: this.queryData.appId, uuid: row.uuid}, resp => {
                instance.confirmButtonLoading = false
                done();
                this.loadData()
              }, resp => {
                done();
                instance.confirmButtonLoading = false
                this.tipError(resp.msg)
              })
            } else {
              done();
            }
          }
        }).then(action => {
          this.$message({
            type: 'success',
            message: '操作成功'
          });
        }).catch((err) => {

        });
      },
      //分页每页展示数更换
      handleSizeChange(val) {
        this.queryData.pageSize = val
        this.loadData()
      },
      //页数更换
      handleCurrentChange(val) {
        this.queryData.pageIndex = val
        this.loadData()
      }
    },
    created() {
      this.queryData.appId = sessionStorage.getItem("appKey")
      this.loadData()
    }
  }
</script>
<style lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;
    }

    &-text {
      font-size: 18px;
      line-height: 46px;
    }
  }
</style>

